<template>
  <div class="bills-title clearfix">
    <span>
      {{ title }}
    </span>
    <div class="bills__content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BillsTitle',
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .bills {
    &-title{
      background: #fff;
      box-shadow:0 5px 5px rgba(224,239,236,.5);
      height: 40px;
      line-height: 40px;
      width: 100%;

      span {
        display: inline-block;
        background: url("../../assets/bills/titleBg.png") no-repeat 100% 0 #fff;
        height: 40px;
        line-height: 40px;
        padding: 0 25px 0 10px;
        font-size: 16px;
        float: left;
        color:#fff;
        font-weight: bold;
        letter-spacing: 3px;
      }
    }

    &__content {
      float: right;
      margin-left: 20px;
      padding-right: 15px;
    }

  }
</style>
